<template>
  <div class="editemployee">
    <el-form ref="employeeForm" :model="employeeForm" class="employee_form" auto-complete="on" :rules="employeeRules">
      <el-form-item prop="employeeName" label="员工名称:">
        <el-input v-model="employeeForm.employeeName" placeholder="请输入名称"></el-input>
      </el-form-item>

      <el-form-item prop="employeePrice" label="员工账号">
        <el-input v-model="employeeForm.employeeAccount" placeholder="请输入价格"></el-input>
      </el-form-item>
      <el-form-item prop="employeePrice" label="员工手机号">
        <el-input v-model="employeeForm.employeePhone" placeholder="请输入库存"></el-input>
      </el-form-item>




    </el-form>
    <div class="myButton">
      <el-button type="warning" round @click="goback()">返回</el-button>
      <el-button type="warning" round @click="editemployeeClick()">保存</el-button>
    </div>
  </div>
</template>

<script>
import {getById,editEmployee} from '@/api/employee'
export default {
  data() {
    return {
      imageUrl: '',
      radio: '1',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      employeeForm: {},
      employeeRules: {
        employeeName: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        employeePrice: [
          { required: true, message: "价格不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init(){

      getById(this.$route.query.employeeId)
      .then((res)=>{
        this.employeeForm = res.data
      })

    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);

    },
    editemployeeClick() {
      editEmployee(this.employeeForm)
      .then((res)=>{
        console.log(res);
      })
      this.$router.go(-1)
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    goback() {
      this.$router.go(-1)
    }
  },
  mounted(){
    this.init()
  }
};
</script>

<style lang="scss">
.editemployee {
  // .main{
  //   width: 80%;
  //   margin: auto;
  //   border: 1px solid black;
  // }
  // border: 1px solid black;
  width: 90%;
  margin: auto;
  margin-top: 30px;

  .el-form-item {
    // 重置或调整 el-form-item 的样式
    margin-bottom: 20px; // 根据需要调整

    // 调整 label 的宽度
    .el-form-item__label {
      width: 100px; // 根据您的需要调整
      text-align: right; // 使标签右对齐
    }

    // 调整 content 的 margin 以与 label 对齐
    .el-form-item__content {
      margin-left: 120px; // 通常等于 label 的宽度加上一些间距
    }

    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }


  }

  .employee_form {
    .el-input__inner {
      // margin-left: 50px;
      width: 70%;
    }
  }

  .myButton {
    margin-left: 500px;
  }
}</style>
